<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<my-component v-model="value" :min="min" :max="max"></my-component>
			<script type="text/xtemplate" id="ipt_number">
				<div>
					<input type="text" :value="currentValue" @change="handleChange"/>
					<button @click="reduce">-</button>
					<button @click="add">+</button>					
				</div>
			</script>
		</div>
		<script src="../js/vue2.5.js"></script>
		<script>
			//正则判断输入的是否是数字
			function isValueNumber(value){
				return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value+'');
			}
			var vm = new Vue({
				el:'#app',
				data:{
					value:2,
					min:0,
					max:10
				},
				components:{
					'my-component':{
						template:'#ipt_number',
						data(){
                        	return{
                        		currentValue : this.value
                        	}
                       },
						props:{
							min : {
								type : Number
							},
							max : {
								type : Number
							},
							value : {
								type : Number
							}
						},
                        methods:{
                        	updateNumber:function(val){
                        		console.log('val',val);
                        		console.log('max',this.max);
                        		console.log('min',this.min);
                        		if(val>=this.max) val = this.max;
                        		
                        		if(val<=this.min) val = this.min;

                        		this.currentValue = val;                      		
                        	},
                        	add:function(){
                        		
                        	},
                        	reduce:function(){
                        		
                        	},
                        	handleChange:function(event){
                        		var val = event.target.value.trim();
                        		var max = this.max;
                        		var min = this.min;
                        		if(isValueNumber(val)){
                        			var oVal = Number(val);
                        			if(oVal>=max){
                        				oVal = max ;
                        				console.log('oVal',oVal);
                        				this.currentValue = oVal;
                        			}else if(oVal<=min){
                        				oVal = min;
                        				this.currentValue = oVal;
                        			}
                        			
                        		}else{
                        			val = this.currentValue;
                        		}
                        	}
                        },
                        mounted(){
                        	this.updateNumber(this.value);
                        }
					}
				}
			})
		</script>
	</body>
</html>
